<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
    <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
</head>

<body>
    <script>
        //创建渲染器，添加到dom当中, antialias（是否启用抗锯齿）
        var renderer = new THREE.WebGLRenderer({ antialias: true });
        //设置渲染器的尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        //将渲染器放置到页面当中
        document.body.appendChild(renderer.domElement);

        //创建场景
        var scene = new THREE.Scene();

        //创建相机，设置位置
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
        //设置相机的位置
        camera.position.set(0, 0, 3);

        //创建一个平行光光源照射到物体上
        var light = new THREE.DirectionalLight(0xffffff, 1.5);
        //设置平型光照射方向，照射方向为设置的点照射到原点
        light.position.set(0, 0, 1);
        //将灯光放到场景当中
        scene.add(light);

        //创建一个接受光照并带有纹理映射的立方体，并添加到场景中
        //首先，获取到纹理
        var map = THREE.ImageUtils.loadTexture("img/disturb.jpg");

        //然后创建一个phong材质来处理着色，并传递给纹理映射
        var material = new THREE.MeshPhongMaterial({ map: map });

        //创建一个立方体的几何体
        var geometry = new THREE.CubeGeometry(1, 1, 1);

        //将集合体和材质放到一个网格中
        var cube = new THREE.Mesh(geometry, material);

        //将立方体网格添加到场景中
        scene.add(cube);

        //声明一个判断是否旋转的变量
        var rotationBool = true;

        (function animate() {
            renderer.render(scene, camera);

            if (rotationBool) {
                cube.rotation.x += 0.02;
                cube.rotation.y += 0.02;
            }

            requestAnimationFrame(animate);
        })();

        document.body.onclick = function () {
            rotationBool = !rotationBool;
        }
    </script>
</body>

</html>